<template>
  <div>
    <Card>
      <div class="flexCSB">
        <div>
          <Button type="primary" @click="getAdd">新增机构</Button>
          <Button type="warning" style="margin-left: 10px" @click="getExport"
            >导出机构列表</Button
          >
        </div>
        <div>
          <Input
            style="width: 300px"
            placeholder="请输入组织机构名称"
            suffix="ios-search"
            v-model="name"
            @on-enter="getData"
          ></Input>
        </div>
      </div>
      <Table
        class="table"
        :loading="loading"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
        show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
    </Card>
    <Modal
      v-model="modal"
      :title="modelTitle"
      width="45"
      :closable="false"
      :mask-closable="false"
    >
      <Form ref="form" :model="mechanismInfo" :rules="rules" :label-width="150">
        <FormItem label="组织名称：" prop="name">
          <Input
            v-model="mechanismInfo.name"
            placeholder="请输入组织名称"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="组织简介" prop="about">
          <Input
            v-model="mechanismInfo.about"
            placeholder="请输入组织简介"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="小程序AppId" prop="appId">
          <Input
            v-model="mechanismInfo.appId"
            placeholder="请输入小程序AppId"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="小程序秘钥" prop="appSecret">
          <Input
            v-model="mechanismInfo.appSecret"
            placeholder="请输入小程序秘钥"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="七牛云访问秘钥">
          <Input
            v-model="mechanismInfo.qiNiuAccessKey"
            placeholder="请输入七牛云访问秘钥"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="七牛云空间名称">
          <Input
            v-model="mechanismInfo.qiNiuBucket"
            placeholder="请输入七牛云空间名称"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="七牛云资源访问域名">
          <Input
            v-model="mechanismInfo.qiNiuDomain"
            placeholder="请输入七牛云资源访问域名"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <FormItem label="七牛云访问秘匙">
          <Input
            v-model="mechanismInfo.qiNiuSecretKey"
            placeholder="请输入七牛云访问秘匙"
            :style="{ width: '300px' }"
          ></Input>
        </FormItem>
        <Form-item style="text-align: right">
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <Button @click="handleReset('form')" style="margin-left: 8px"
            >取消</Button
          >
        </Form-item>
      </Form>
      <div slot="footer">
        <!-- <Button class="Button" type="primary" @click="submit">确认登陆</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
import { exportMethod } from "../../../util/push";
export default {
  data() {
    return {
      loading: false,
      columns: [
        { title: "组织名称", key: "name", align: "center", width: 200 },
        { title: "组织简介", key: "about", align: "center", width: 200 },
        { title: "小程序AppId", key: "appId", align: "center", width: 200 },
        { title: "小程序秘钥", key: "appSecret", align: "center", width: 200 },
        { title: "唯一编码", key: "code", align: "center", width: 200 },
        {
          title: "七牛云访问秘钥",
          key: "qiNiuAccessKey",
          align: "center",
          width: 200,
        },
        {
          title: "七牛云空间名称",
          key: "qiNiuBucket",
          align: "center",
          width: 200,
        },
        {
          title: "七牛云资源访问域名",
          key: "qiNiuDomain",
          align: "center",
          width: 200,
        },
        {
          title: "七牛云秘钥",
          key: "qiNiuSecretKey",
          align: "center",
          width: 200,
        },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "primary" },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.getUpdate(params.row);
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: { type: "error" },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.del(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      data: [],
      total: 0,
      current: 1,
      size: 10,
      id: "",
      name: "",
      modal: false,
      mechanismInfo: {
        name: "", // 组织名称
        about: "", //结构简介
        appId: "", // 小程序AppId
        appSecret: "", // 小程序秘钥
        qiNiuAccessKey: "", // 七牛云访问秘钥
        qiNiuBucket: "", // 七牛云空间名称
        qiNiuDomain: "", // 七牛云资源访问域名
        qiNiuSecretKey: "", // 七牛云访问秘匙
      },
      rules: {
        name: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
        ],
        about: [
          { required: true, message: "机构简介不能为空", trigger: "blur" },
        ],
        appId: [
          { required: true, message: "小程序AppId不能为空", trigger: "blur" },
        ],
        appSecret: [
          { required: true, message: "小程序秘钥不能为空", trigger: "blur" },
        ],
      },

      modelTitle: "新增机构",
    };
  },
  created() {
    this.getData();
    // this.getDataSelect();
  },
  methods: {
    // 获取列表
    getData() {
      // console.log();
      this.loading = true;
      this.$http(
        "/chongqing/stage/group/getOrganization",
        {
          current: this.current, // 第几页
          name: this.name, // 机构名称
          size: this.size, // 每页数据大小
        },
        "post",
        (res) => {
          if (res.data.code == 1000) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
    },
    // 机构选择器
    getDataSelect() {
      this.$http("/chongqing/stage/group/selector", {}, "get", (res) => {
        if (res.data.code == 1000) {
          console.log(red.data);
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 切换页码
    changePage(data) {
      this.current = data;
      this.getData();
    },

    // 提交表单
    handleSubmit(form) {
      let that = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // this.$Message.success("提交成功!");
          console.log(this.exhibition);
          if (this.modelTitle == "新增机构") {
            this.$http(
              "/chongqing/stage/group/addOrganization",
              {
                about: this.mechanismInfo.about,
                appId: this.mechanismInfo.appId,
                appSecret: this.mechanismInfo.appSecret,
                name: this.mechanismInfo.name,
                qiNiuAccessKey: this.mechanismInfo.qiNiuAccessKey,
                qiNiuBucket: this.mechanismInfo.qiNiuBucket,
                qiNiuDomain: this.mechanismInfo.qiNiuDomain,
                qiNiuSecretKey: this.mechanismInfo.qiNiuSecretKey,
              },
              "post",
              (res) => {
                console.log(res);
                console.log(res.data.data);
                if (res.data.code == 1000) {
                  that.modal = false;
                  that.$Message.success(res.data.msg);
                  that.$refs[form].resetFields();
                  that.getData();
                } else {
                  that.$Message.error(res.data.msg);
                }
              }
            );
          } else {
            this.$http(
              "/chongqing/stage/group/updateOrganization",
              {
                id: this.id,
                about: this.mechanismInfo.about,
                appId: this.mechanismInfo.appId,
                appSecret: this.mechanismInfo.appSecret,
                name: this.mechanismInfo.name,
                qiNiuAccessKey: this.mechanismInfo.qiNiuAccessKey,
                qiNiuBucket: this.mechanismInfo.qiNiuBucket,
                qiNiuDomain: this.mechanismInfo.qiNiuDomain,
                qiNiuSecretKey: this.mechanismInfo.qiNiuSecretKey,
              },
              "post",
              (res) => {
                console.log(res);
                console.log(res.data.data);
                if (res.data.code == 1000) {
                  that.modal = false;
                  that.$Message.success(res.data.msg);
                  that.$refs[form].resetFields();
                  this.getData();
                } else {
                  that.$Message.error(res.data.msg);
                }
              }
            );
          }
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    // 删除
    del(params) {
      this.$confirm("此操作将永久删除该机构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(
            "/chongqing/stage/group/deleteOrganization",
            {
              id: params.row.id,
            },
            "post",
            (res) => {
              console.log(res);
              if (res.data.data.flag == true) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.current = 1;
                this.getData();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 重置表单，并隐藏model
    handleReset(form) {
      this.modal = false;
      this.$refs[form].resetFields();
    },
    // 点击新增按钮
    getAdd() {
      this.modelTitle = "新增机构";
      this.mechanismInfo = {
        name: "", // 组织名称
        about: "", //结构简介
        appId: "", // 小程序AppId
        appSecret: "", // 小程序秘钥
        qiNiuAccessKey: "", // 七牛云访问秘钥
        qiNiuBucket: "", // 七牛云空间名称
        qiNiuDomain: "", // 七牛云资源访问域名
        qiNiuSecretKey: "", // 七牛云访问秘匙
      };
      this.modal = true;
    },
    // 点击修改按钮
    getUpdate(row) {
      console.log("修改");
      this.modal = true;
      this.modelTitle = "修改机构";
      this.id = row.id;
      this.mechanismInfo = {
        name: row.name, // 组织名称
        about: row.about, //结构简介
        appId: row.appId, // 小程序AppId
        appSecret: row.appSecret, // 小程序秘钥
        qiNiuAccessKey: row.qiNiuAccessKey, // 七牛云访问秘钥
        qiNiuBucket: row.qiNiuBucket, // 七牛云空间名称
        qiNiuDomain: row.qiNiuDomain, // 七牛云资源访问域名
        qiNiuSecretKey: row.qiNiuSecretKey, // 七牛云访问秘匙
      };
    },
    // 导出机构
    getExport() {
      // console.log(exportMethod);
      exportMethod({
        method: "get",
        url: "/chongqing/stage/group/export",
        data: {},
      });
    },
  },
};
</script>

<style scoped>
.test {
  cursor: pointer;
}
</style>
